<template>
  <a-layout class="page-miH page-bgBack">
    <div class="operation">
      <a-alert
        closable
        :after-close="handleClose"
        v-if="alertVisible"
        message="累计项科目计算公式：当月累计值=当月值+上月累计值"
        type="warning"
        show-icon
        style="width: 500px"
      />
    </div>
    <div style="padding: 24px 24px 0 24px; display: flex; justify-content: space-between">
      <a-input-search allow-clear style="width: 180px" placeholder="请输入姓名/身份证号/手机号" @search="inputChange"></a-input-search>
      <div>
        <a-button :disabled="!selectedRowKeys.length" @click="() => download(1)">批量导出</a-button>
        <a-button type="primary" :disabled="!data || !data.length" style="margin-left: 12px" @click="() => download(2)">全部导出</a-button>
        <a-button type="primary" style="margin-left: 12px" @click="goImport">批量导入</a-button>
      </div>
    </div>
    <div class="tableBox">
      <a-table
        :scroll="{ x: 1200 }"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="id"
        :data-source="data"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <a slot="name" style="position: relative; cursor: default" slot-scope="text, record">
          <img
            :src="abolitionImg"
            v-if="record.status === 4"
            style="position: absolute; top: -16px; left: -15px; width: 50px; height: 50px"
          />
          <p style="margin-left: 20px; margin-bottom: 0; color: #595959">
            {{ text }}
          </p>
        </a>
        <span slot="cumulativeIncome" slot-scope="text, record">
          {{
            record.empTaxGrandTotalVO && (record.empTaxGrandTotalVO.cumulativeIncome || record.empTaxGrandTotalVO.cumulativeIncome === 0)
              ? record.empTaxGrandTotalVO.cumulativeIncome
              : "--"
          }}
        </span>
        <span slot="cumulativeDeductions" slot-scope="text, record">
          {{
            record.empTaxGrandTotalVO &&
            (record.empTaxGrandTotalVO.cumulativeDeductions || record.empTaxGrandTotalVO.cumulativeDeductions === 0)
              ? record.empTaxGrandTotalVO.cumulativeDeductions
              : "--"
          }}
        </span>
        <span slot="cumulativeSpecialDeduction" slot-scope="text, record">
          {{
            record.empTaxGrandTotalVO &&
            (record.empTaxGrandTotalVO.cumulativeSpecialDeduction || record.empTaxGrandTotalVO.cumulativeSpecialDeduction === 0)
              ? record.empTaxGrandTotalVO.cumulativeSpecialDeduction
              : "--"
          }}
        </span>
        <span slot="cumulativePrepaidTax" slot-scope="text, record">
          {{
            record.empTaxGrandTotalVO &&
            (record.empTaxGrandTotalVO.cumulativePrepaidTax || record.empTaxGrandTotalVO.cumulativePrepaidTax === 0)
              ? record.empTaxGrandTotalVO.cumulativePrepaidTax
              : "--"
          }}
        </span>
        <a slot="action" slot-scope="text, record" class="primary_color" @click="showEdit(record)"> 修改 </a>
      </a-table>
    </div>
    <a-drawer title="修改上月个税累计值" :width="590" :visible="visible" :wrap-style="{ overflow: 'auto' }" @close="onClose">
      <a-alert
        closable
        :after-close="handleClose2"
        v-if="alertVisible2"
        message="修改上月个税累计值将影响本月个税计算"
        type="warning"
        show-icon
      />
      <a-form :form="empyleeForm" style="margin-left: 30px">
        <a-row :gutter="24" style="margin-top: 24px">
          <a-form-item label="员工姓名" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-input placeholder="请输入姓名" v-model="empyleeForm.empName" :disabled="true" />
          </a-form-item>
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="累计收入额(截至上月)" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-input placeholder="请输入累计收入额" v-model="empyleeForm.cumulativeIncome" />
          </a-form-item>
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="累计减除费用(截至上月)" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-input placeholder="请输入累计减除费用" v-model="empyleeForm.cumulativeDeductions" />
          </a-form-item>
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="累计专项扣除(截至上月)" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-input placeholder="请输入累计专项扣除费用" v-model="empyleeForm.cumulativeSpecialDeduction" />
          </a-form-item>
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="累计已预缴税额" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-input placeholder="请输入累计已预缴税额" v-model="empyleeForm.cumulativePrepaidTax" />
          </a-form-item>
        </a-row>
      </a-form>
      <div class="submitBox">
        <a-button :style="{ marginRight: '12px' }" type="primary" html-type="submit" @click="handleSubmit">提交</a-button>
        <a-button @click="onClose"> 取消 </a-button>
      </div>
    </a-drawer>
  </a-layout>
</template>
<script>
const columns = [
  {
    title: "员工姓名",
    dataIndex: "name",
    key: "name",
    width: 120,
    scopedSlots: { customRender: "name" }
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    key: "idCard",
    width: 200
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
    width: 160
  },
  {
    title: "累计收入额(截至上月)",
    dataIndex: "cumulativeIncome",
    key: "cumulativeIncome",
    scopedSlots: { customRender: "cumulativeIncome" },
    width: 150
  },
  {
    title: "累计减除费用(截至上月)",
    dataIndex: "cumulativeDeductions",
    key: "cumulativeDeductions",
    scopedSlots: { customRender: "cumulativeDeductions" },
    width: 150
  },
  {
    title: "累计专项扣除(截至上月)",
    dataIndex: "cumulativeSpecialDeduction",
    key: "cumulativeSpecialDeduction",
    scopedSlots: { customRender: "cumulativeSpecialDeduction" },
    width: 150
  },
  {
    title: "累计已预缴税额",
    dataIndex: "cumulativePrepaidTax",
    key: "cumulativePrepaidTax",
    scopedSlots: { customRender: "cumulativePrepaidTax" },
    width: 150
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: 120
  }
];
import { getTax, editTax } from "@/api/wages/monthly";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
import moment from "moment";
export default {
  mixins: [mixin],
  data() {
    return {
      abolitionImg: require("@/assets/home/lizhi.png"),
      empyleeForm: {},
      monthly: null,
      selectedRowKeys: [],
      yearly: null,
      salaryTemplateId: null,
      visible: false,
      alertVisible: true,
      inputName: null,
      alertVisible2: true,
      data: [],
      columns,
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      }
    };
  },

  created() {
    this.salaryTemplateId = this.$route.query.salaryTemplateId;
    // this.monthly = this.$route.query.monthly;
    // this.yearly = this.$route.query.yearly;
    this.monthly = moment().format("MM");
    this.yearly = moment().format("YYYY");
    this.getTaxList();
  },

  beforeDestory() {},
  methods: {
    goImport() {
      this.$router.push("./importTax");
    },
    download(i) {
      if (i === 2) {
        this.exportData = {
          companyId: this.companyId,
          monthly: parseInt(this.monthly),
          yearly: parseInt(this.yearly),
          nameOrPhone: this.inputName ? this.inputName : undefined
          // empIdList: []
        };
      } else {
        this.exportData = {
          companyId: this.companyId,
          monthly: parseInt(this.monthly),
          yearly: parseInt(this.yearly),
          empIdList: this.selectedRowKeys
        };
      }
      this.url = `/salary/api/v1/empTaxGrandTotals/exportCompanyTaxGrandTotalPage`;
      this.excelName = "个税累计导出详情" + ".xlsx";
      this.postDownload();
    },
    onSelectChange(selectedRowKeys, e) {
      this.selectedRowKeys = selectedRowKeys;
    },
    inputChange(e) {
      this.inputName = e;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.getTaxList();
    },
    handleClose2() {
      this.alertVisible2 = false;
    },
    handleClose() {
      this.alertVisible = false;
    },
    getTaxList() {
      getTax({
        companyId: this.companyId,
        salaryTemplateSalaryId: this.salaryTemplateId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        monthly: parseInt(this.monthly),
        yearly: parseInt(this.yearly),
        nameOrPhone: this.inputName
      }).then((res) => {
        this.data = res.data.entities;
        this.pagination.total = res.data.entityCount;
      });
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getTaxList();
    },
    handleSubmit() {
      editTax({
        ...this.empyleeForm
        // monthly: parseInt(this.monthly),
        // yearly: parseInt(this.yearly)
      }).then((res) => {
        this.getTaxList();
        this.$notification["success"]({
          message: "成功",
          description: "修改成功"
        });
        this.visible = false;
      });
    },
    onClose() {
      this.visible = false;
    },
    showEdit(record) {
      this.visible = true;
      this.empyleeForm = JSON.parse(JSON.stringify(record.empTaxGrandTotalVO));
      this.empyleeForm.empName = record.name;
    },
    goCalculation() {
      this.$router.push({
        path: "/wages/monthly/calculation"
      });
    },
    goEdit() {
      this.$router.push({
        path: "/wages/monthly/editDetails"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);
.head {
  padding: 10px 0 10px 0;
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 60px;
  justify-content: space-between;
  height: 60px;
  .title {
    margin-right: 47%;
    color: #333333;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    margin-top: -10px;
  }
}

.tableBox {
  padding: 24px;
}
.operation {
  padding: 24px 0 0 24px;
}
.emp-title {
  padding-left: 24px;
  line-height: 48px;
  height: 48px;
  background: rgba(250, 250, 250, 1);
}
.submitBox {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
</style>
